﻿<template>
  <div class="mainBg">

    <!-- 轮播图组件 -->
    <div v-if="isCaregiverOrFamily" style="margin:unset;">
      <Carousel />
    </div>



    <!-- 内容区域 -->
    <div style="flex: 1; padding: 20px; background-color: #f8fafc;">
      <router-view />

      <!-- 公告和图表 -->
      <div style="max-width: 1200px; margin: 0 auto;">
        <!-- 网站公告 -->
        <el-card style="margin-bottom: 20px; background-color: white; border-radius: 10px; padding: 20px;">
          <template #header>
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <span style="font-size: 20px; font-weight: bold; color: #87CEEB;">网站公告</span>
            </div>
          </template>
          <el-collapse accordion>
            <el-collapse-item v-for="(item, index) in state.notice" :key="item.id" :name="'' + index">
              <template #title>
                <span style="font-size: 16px;">标题：{{ item.name }}</span>
                <span style="margin-left: 10px; color: #666;">发布时间：{{ dateFliter(item.createTime) }}</span>
              </template>
              <div v-html="item.content" style="line-height: 1.6; color: #333;"></div>
            </el-collapse-item>
          </el-collapse>
        </el-card>

        <!-- 图表组件 -->
        <ChartsComponent />
        
      </div>
      <Footer />
    </div>
    
  </div>

</template>

<script setup>
import { RouterView, useRoute } from 'vue-router';
import { useUserStore } from '@/stores/user';
import request from '@/utils/request';
import { ElMessage } from 'element-plus';
import Carousel from '@/components/Carousel.vue';
import ChartsComponent from '@/components/ChartsComponent.vue';
import { reactive, onMounted, computed } from 'vue'; // 导入所有必要的 Vue API
import dayjs from 'dayjs'; // 确保导入 dayjs
import Footer from '../components/footer.vue';

const userStore = useUserStore();
const user = userStore.getUser;
const route = useRoute();
const activePath = route.path.replace('/', '');

// 使用 computed 定义响应式计算属性
const isAdmin = computed(() => user.role === 'ADMIN');
const isCaregiverOrFamily = computed(() =>
  user.role === 'WORKER' || user.role === 'FAMILYMEMBER'
);

// 响应式状态
const state = reactive({
  notice: []
});

// 日期格式化
const dateFliter = (val, format = 'YYYY-MM-DD HH:mm:ss') => {
  if (!val) return '--';
  return dayjs(val).format(format);
};

// 生命周期钩子
onMounted(() => {
  request.get('/notice').then(res => {
    state.notice = res.data;
  });
});

// 菜单数据
const menus = computed(() => userStore.getMenus);

// 注销功能
const logout = () => {
  request.get(`/logout/${user.uid}`).then(res => {
    if (res.code === '200') {
      userStore.logout();
      ElMessage.success('注销成功');
      router.push('/login');
    } else {
      ElMessage.error(res.msg);
    }
  });
};
</script>

<style scoped>
.home-content {
  min-height: 100vh;
}
.home-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.home-main-content {
  flex: 1; /* 假设首页主要内容容器类名为home - main - content，使其占据剩余空间 */
}
</style>